<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <form th:replace="common/css-js :: common-css"></form>
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
        #f{
            position: absolute;
            top: -40px;
            left: 590px;
        }
    </style>
</head>

<body>
<div th:replace="common/bar :: navbar"></div>
<div th:replace="common/bar ::sidebar(activeUrl='teacher')"></div>

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" th:object="${page}">
    <h2 class="text-center">教师列表</h2>
    <br/>
    <div class="row">
        <a class="btn btn-primary btn-sm offset-md-1" href="#" id="add" >添加</a>
    </div>
    <div class="row">

        <div class="col-lg-6">
            <div class="input-group " id="f">
                <input type="text" class="form-control " placeholder="请输入教师姓名" id="teacher_search" th:value="${One}">
                <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="search" >搜索</button>
      </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
  <!--  <div class="table-responsive" >
        <div th:replace="common/bar ::sidebar(activeUrl='teacher')">

        </div>-->
        <table class="table table-striped table-sm">
            <thead>
            <tr>
                <th>#</th>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
                <th>education</th>
                <th>operate</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="teacher,stat:*{records}">
                <td th:text="${stat.count}"></td>
                <td th:text="${teacher.teacherId}"></td>
                <td th:text="${teacher.teacherName}"></td>
                <td th:text="${teacher.teacherAge}"></td>
                <td th:text="${teacher.teacherGerder==1?'男':'女'}"></td>
                <td th:text="${teacher.education}"></td>
                <td>
                     <button class="btn btn-sm btn-primary update_btn"
                            th:attr="update_url=@{/teacher/{teacherId}(teacherId=${teacher.teacherId})}">修改
                    </button>
                    <button class="btn btn-sm btn-danger del_btn"
                            th:attr="name=${teacher.teacherName},id=${teacher.teacherId}">删除
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
        <nav aria-label="Page navigation example" class="offset-4">
            <ul class="pagination">
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'">
                    <a class="page-link" href="#" tabindex="-1" th:tabindex="*{not hasPrevious()}?'-1'"
                       th:attr="cu=1" id="2">首页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'">
                    <a class="page-link" href="#" tabindex="-1" th:tabindex="*{not hasPrevious()}?'-1'" th:attr="cu=@{(*{current}-1)}" id="1">上一页</a>
                </li>
                <li class="page-item" th:each="pageNum:${pageNums}" th:class="${pageNum}==*{current}?'page-item active':'page-item'">
                    <a class="page-link ass"  th:attr="cu=${pageNum}"
                       th:tabindex="${pageNum}==*{current}?'-1'">
                        [[${pageNum}]]

                    </a>
                </li>
                </li>
                <li class="page-item" th:class="*{hasNext()}?'page-item':'page-item disabled'">
                    <a class="page-link" href="#" th:tabindex="*{not hasNext()}?'-1'" th:attr="cu=@{(*{current}+1)}"  id="as">下一页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasNext()}?'page-item':'page-item disabled'">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:attr="cu=@{(*{pages})}" id="3">尾页</a>
                </li>
            </ul>
        </nav>
    </div>

    <form id="delete_form" method="post">
        <input type="hidden" name="_method" value="DELETE">
    </form>
</main>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="margin-top: 15%">
        <!-- 此处设置id属性及thymeleaf片段，用于加载后端的域数据 -->
        <div class="modal-content" id="addOrUpdate" th:fragment="addOrUpdate">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel"
                    th:text="${teacher!=null}?'教师修改页':'教师添加页'">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form th:action="@{/teachers}" id="updateForm">
                    <input type="hidden" name="_methods" th:if="${teacher!=null}" value="PUT"/>
                    <input type="hidden" name="teacherId" th:if="${teacher!=null}" th:value="${teacher.teacherId}">
                    <div class="form-group">
                        <label for="teacherName">Name</label>
                        <input type="text" class="form-control" id="teacherName" placeholder="Name"  name="teacherName" th:value="${teacher!=null}?${teacher.teacherName}">
                    </div>
                    <div class="form-group">
                        <label for="teacherAge">Age</label>
                        <input type="text" class="form-control" id="teacherAge" placeholder="Age"  name="teacherAge" th:value="${teacher!=null}?${teacher.teacherAge}">
                    </div>
                    <div class="form-group">
                        <label>Gender</label><br/>
                        <div class="form-check form-check-inline">
                            <input  class="form-check-input" type="radio" name="teacherGerder"
                                    id="male" value="1" checked   th:checked="${teacher!=null}?${teacher.teacherGerder==1}:true">
                            <label class="form-check-label" for="male" > 男</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input   class="form-check-input" type="radio" name="teacherGerder"
                                     id="female" value="0"  th:checked="${teacher!=null}?${teacher.teacherGerder==0}">
                            <label class="form-check-label" for="female">女</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="education">Degree</label>
                        <select class="form-control" id="education" name="education"  style="height: 45px">
                            <option th:text="${teacher.education}" th:if="${teacher!=null}" th:type="${teacher!=null}?'text':'hidden'"></option>
                            <option th:if="${teacher!=null}" th:style="${teacher.education=='专科'}?'display:none':''" >专科</option>
                            <option th:if="${teacher==null}"  >专科</option>
                            <option th:if="${teacher!=null}" th:style="${teacher.education=='本科'}?'display:none':''">本科</option>
                            <option th:if="${teacher==null}" >本科</option>
                            <option th:if="${teacher!=null}" th:style="${teacher.education=='硕士研究生'}?'display:none':''">硕士研究生</option>
                            <option th:if="${teacher==null}" >硕士研究生</option>
                            <option th:if="${teacher!=null}" th:style="${teacher.education=='博士研究生'}?'display:none':''">博士研究生</option>
                            <option th:if="${teacher==null}" >博士研究生</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="guanbi">关闭</button>
                <button type="button" class="btn btn-primary" id="update"
                        th:text="${teacher!=null}?'修改':'添加'">Save changes</button>
        </div>
    </div>
</div>
    <input type="hidden" id="search_Name" th:attr="name=${One}">
    </div>


    <div th:replace="common/css-js :: common-js"></div>
    <script th:inline="javascript">
        let list_url=/*[[@{/teacher}]]*/;
        let add=/*[[@{/toAddOne}]]*/;

            $("#add").on("click",function () {
                // let f =$("[name='teacherName']").val()
                //      $("#myModal").modal("show")
                $("#addOrUpdate").load(add + " #addOrUpdate",function () {
                    $("#myModal").modal({
                        keyboard: false,
                        backdrop:'static',
                        show:true
                    })
                });
            })
        $("table").on("click",".update_btn",function () {
            $("#addOrUpdate").load($(this).attr("update_url") + " #addOrUpdate",function () {
                $("#myModal").modal({
                    keyboard: false,
                    backdrop:'static',
                    show:true
                })
            });
        })
        $("body").on("click","#update",function () {

            let word = $("[name='_methods']").val()=='PUT'?'修改':'添加';
            $.ajax({
                url:$("#updateForm").attr("action"),
                type:$("[name='_methods']").val()=='PUT'?'put':'post',
                data:$("#updateForm").serialize(),
                // dataType:"json",
                success:function (res){
                    // console.log(res);
                    alert(word + (res?"成功":"失败"));
                    location.href = list_url;
                }
            })

        })
        $("table").on("click",".del_btn",function (){
            let name = $(this).attr("name");
            let id = $(this).attr("Id");
            if(confirm("是否删除名为【"+name+"】的信息")){
                $.ajax({
                    url:"/xs/teacher/delete/"+id,
                    type:"get",
                    success:function(res){
                        alert("删除"+res);
                        window.location.reload();
                    }
                })
            }
        })
        $("body").on("click","#guanbi",function (){
            location.reload()
        })
        $("#search").on("click",function (){
            let name = $("#teacher_search").val()
            location.href = "/xs/teacher?search="+name;
        })
        $("#as").on("click",function (){
            let cu = $(this).attr("cu")
            let name = $("#search_Name").attr("name")
            location.href = "/xs/teacher?search="+name+"&current="+cu;
        })
        let a = 1;
        for(a;a<=3;a++){
            $("#"+a).on("click",function (){
                let cu = $(this).attr("cu")
                let name = $("#search_Name").attr("name")
                location.href = "/xs/teacher?search="+name+"&current="+cu;
            })
        }
        $("ul").on("click",".ass",function (){
            let cu = $(this).attr("cu")
            let name = $("#search_Name").attr("name")
            location.href = "/xs/teacher?search="+name+"&current="+cu;
        })
    </script>

</body>
</html>